<template>
  <div style="overflow-y:auto;">
    <Form ref="tool" :rules="toolValidate" :model="applyInfo" :label-width="120" label-position="left"
      class="form form_left">
      <Row>
        <Col span="10">
        <FormItem label="工具类型:" prop="clazz">
          <Input v-model="applyInfo.clazz" type="text" />
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="工具名称:" prop="toolName">
          <Input v-model="applyInfo.toolName" type="text" />
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <FormItem label="归属系统:" prop="amId">
          <Select v-model="applyInfo.belongSysId" @on-change="setSys" :transfer="true">
            <Option v-for="(item, index) in allSysLists" :key="index" :value="item.id">{{item.sysName}}</Option>
          </Select>
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="模板类型:" prop="model">
          <Select v-model="applyInfo.spServiceType" :transfer="true">
            <Option v-for="model in modelType" :value="model.modelType">{{model.modelName}}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <FormItem label="描述:">
          <Input v-model="applyInfo.des" maxlength="100" type="text" />
        </FormItem>
        </Col>
        <Col span="10" style="left: 10%;">
        <FormItem label="支持的资源池:">
          <Select v-model="applyInfo.supportSysIds" :transfer="true" multiple label-in-value @on-change="setSupportSys">
            <Option v-for="(item, index) in allEntrySys" :key="index" :value="item.id">{{item.sysName}}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
      <Row>
        <Col span="10">
        <FormItem label="关联的账号模板:">
          <Select v-model="applyInfo.templateAccountId" :transfer="true" clearable>
            <Option v-for="(item, index) in accountList" :key="index" :value="item.id">{{item.modelName}}</Option>
          </Select>
        </FormItem>
        </Col>
      </Row>
    </Form>
  </div>
</template>

<script>
  import Axios from 'axios'
  import ajax from "../../../ajax_util"
  import model_type from '../../../utils/model_type.json'

  export default {
    components: {},
    data() {
      return {
        modelType: [],
        toolValidate: {
          clazz: [{
            required: true,
            type: 'string',
            message: '请填写工具类型',
            trigger: 'blur'
          }, ],
          toolName: [{
            required: true,
            type: 'string',
            message: '请填写工具名称',
            trigger: 'blur'
          }, ],
        },
        allSysLists: [],
        allEntrySys: [],
        accountList: [],
      }
    },
    computed: {
      applyInfo: {
        get: function() {
          return this.value;
        },
        set: function(value) {
          this.$emit('input', value);
        }
      }
    },
    created: function() {
      this.modelType = model_type
    },
    mounted() {
      this.getSys();
      this.getEntrySys();
      this.getAccountModelName();
    },
    methods: {
      getAccountModelName(){
        var url = this.CONFIG.progress_url + "/template-acconut/name"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.accountList = data
          }
        })
      },
      setSupportSys(val) {
        console.log("val -- ", val)
        this.applyInfo.supportSys = []
        val.forEach(sys => {
          this.applyInfo.supportSys.push({
            sysId: sys.value,
            sysName: sys.label
          })
        })
      },
      // 获取支持的资源池
      getEntrySys() {
        var url = this.CONFIG.progress_url + "/system-map/for/paas"
        var that = this;
        ajax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            that.allEntrySys = data
          }
        })
      },
      validate() {
        var result = false;
        this.$refs.tool.validate((valid) => {
          console.log("===876=====", valid);
          result = valid;
        })
        return result;
      },
      getSys() {
        var url = this.CONFIG.progress_url + "/system-map/for/resource"
        var that = this;
        this.myAjax.get({
          url: url,
          that: that,
          params: null,
          success: function(data) {
            console.log("-----getSys---------", data)
            that.allSysLists = data
          }
        })
      },
      setSys(id) {
        console.log("-------setSys-------");
        this.applyInfo.belongSys = this.allSysLists.find(e => e.id == id)
      },
    },
    props: {
      value: {},
    },
    watch: {}
  }
</script>

<style>

</style>
